<template>
  <div class="page-header-index-wide">
    <a-row :gutter="12">
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日新增封堵总数" :total="data1.quickReportTotal.periodValue | NumberFormat">
          <template slot="footer">环比
            <a-icon v-if="data1.quickReportTotal.moMValue > 0" class="m1" type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }" />
            <a-icon v-if="data1.quickReportTotal.moMValue < 0" class="m1" type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }" />
            <span class="m1" v-if="data1.quickReportTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.quickReportTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.quickReportTotal.moMValue) | NumberFormat }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日封堵推送总数"
          :total="data1.blockingDistributeTotal.periodValue | NumberFormat">
          <template slot="footer">环比
            <a-icon v-if="data1.blockingDistributeTotal.moMValue > 0" class="m1" type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }" />
            <a-icon v-if="data1.blockingDistributeTotal.moMValue < 0" class="m1" type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }" />
            <span class="m1" v-if="data1.blockingDistributeTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.blockingDistributeTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.blockingDistributeTotal.moMValue) | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日误封堵申诉总数"
          :total="data1.unsealDistributeTotal.periodValue | NumberFormat">
          <template slot="footer">环比
            <a-icon v-if="data1.unsealDistributeTotal.moMValue > 0" class="m1" type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }" />
            <a-icon v-if="data1.unsealDistributeTotal.moMValue < 0" class="m1" type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }" />
            <span class="m1" v-if="data1.unsealDistributeTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.unsealDistributeTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.unsealDistributeTotal.moMValue) | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日封堵反馈总数" :total="data1.feedbackBlockingTotal.periodValue | NumberFormat">
          <template slot="footer">环比
            <a-icon v-if="data1.feedbackBlockingTotal.moMValue > 0" class="m1" type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }" />
            <a-icon v-if="data1.feedbackBlockingTotal.moMValue < 0" class="m1" type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }" />
            <span class="m1" v-if="data1.feedbackBlockingTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.feedbackBlockingTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.feedbackBlockingTotal.moMValue) | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="4">
        <chart-card :loading="loading" title="当日解封反馈总数" :total="data1.feedbackUnsealTotal.periodValue | NumberFormat">
          <template slot="footer">环比
            <a-icon v-if="data1.feedbackUnsealTotal.moMValue > 0" class="m1" type="caret-up"
              :style="{ fontSize: '16px', color: '#F52D38' }" />
            <a-icon v-if="data1.feedbackUnsealTotal.moMValue < 0" class="m1" type="caret-down"
              :style="{ fontSize: '16px', color: '#90D96C' }" />
            <span class="m1" v-if="data1.feedbackUnsealTotal.moMRatio == '-'">--</span>
            <span class="m1" v-else> {{ Math.abs(data1.feedbackUnsealTotal.moMRatio) | NumberFormat }}% </span>
            <span class="m1"> {{ Math.abs(data1.feedbackUnsealTotal.moMValue) | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="新增封堵趋势" id="ExportArea1">
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-col :span="5">
              <a-form-model-item label="数据来源">
                <a-select v-model="params2.dataSource" allowClear placeholder="请选择" style="width:100%;"
                  @change="getData2">
                  <a-select-option v-for="(item, key) in sourceArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item label="诈骗类型">
                <a-select v-model="params2.fraudType" allowClear placeholder="请选择" style="width:100%;"
                  @change="getData2">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(item, key) in fraud_typeArr" :key="key" :value="item.value">{{
                    item.title
                  }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-form-model>
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active2Arr[0] ? 'active' : ''" @click="onSec2Click(1)">当天</span>
            <span class="timeItem" :class="active2Arr[1] ? 'active' : ''" @click="onSec2Click(2)">近一周</span>
            <span class="timeItem" :class="active2Arr[2] ? 'active' : ''" @click="onSec2Click(3)">近一月</span>
            <a-range-picker class="timeItem" v-model="rangeTime2" valueFormat="YYYY-MM-DD" :allowClear="true"
              :disabled-date="disabledDate2" @change="onTimeSec2Change"
              @calendarChange="calendarPriceRangeChange($event, 'selectPriceDate2')" />
            <a-icon type="download" style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea1', '新增封堵趋势')" />
          </div>
          <smLine style="height:420px;margin-top: 30px;" v-if="data2.length > 0" :data="data2" :color="['#1F93FF']"
            splitLine />
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="封堵推送趋势" id="ExportArea2">
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-col :span="5">
              <a-form-model-item label="数据来源">
                <a-select v-model="params3.dataSource" allowClear placeholder="请选择" style="width:100%;"
                  @change="getData3">
                  <a-select-option v-for="(item, key) in sourceArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item label="诈骗类型">
                <a-select v-model="params3.fraudType" allowClear placeholder="请选择" style="width:100%;"
                  @change="getData3">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(item, key) in fraud_typeArr" :key="key" :value="item.value">{{
                    item.title
                  }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-form-model>
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active3Arr[0] ? 'active' : ''" @click="onSec3Click(1)">当天</span>
            <span class="timeItem" :class="active3Arr[1] ? 'active' : ''" @click="onSec3Click(2)">近一周</span>
            <span class="timeItem" :class="active3Arr[2] ? 'active' : ''" @click="onSec3Click(3)">近一月</span>
            <a-range-picker class="timeItem" v-model="rangeTime3" valueFormat="YYYY-MM-DD" :allowClear="true"
              :disabled-date="disabledDate3" @change="onTimeSec3Change"
              @calendarChange="calendarPriceRangeChange($event, 'selectPriceDate3')" />
            <a-icon type="download" style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea2', '封堵推送趋势')" />
          </div>
          <smLine style="height:420px;margin-top: 30px;" v-if="data3.length > 0" :data="data3" :color="['#1F93FF']"
            splitLine />
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="24">
        <a-card title="运营商封堵占比情况" id="ExportArea3">
          <div class="timeBox" slot="extra">
            <span class="timeItem" :class="active4Arr[0] ? 'active' : ''" @click="onSec4Click(1)">当天</span>
            <span class="timeItem" :class="active4Arr[1] ? 'active' : ''" @click="onSec4Click(2)">近一周</span>
            <span class="timeItem" :class="active4Arr[2] ? 'active' : ''" @click="onSec4Click(3)">近一月</span>
            <a-range-picker class="timeItem" v-model="rangeTime4" valueFormat="YYYY-MM-DD" :allowClear="true"
              @change="onTimeSec4Change" />
            <a-icon type="download" style="color:#BFBFBF;font-size: 20px;margin-left:20px;"
              @click="download('#ExportArea3', '运营商封堵占比情况')" />
          </div>
          <smPie v-if="data4.data.length > 0" :data="data4.data" :color="data4.color" :legendRight="data4.legendRight"
            :itemGap="data4.itemGap" legendType="scroll" legendLabelSuffix :hollow="false" :labelLine="true"
            style="height:300px;"></smPie>
          <p class="noData" v-else><a-empty /></p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import exportHandle from '@/utils/export-util/pdf-canvas'
import smLine from '@/components/echarts/smLine.vue'
import smPie from '@/components/echarts/smPie.vue'
import ChartCard from '@/components/ChartCard'
import { getDictItemsFromCache } from '@/api/api'
import { statisticsTotal, blockingTrend, feedbackTrend, blockingRatio } from '@/api/plugging/authority/fd.js'
export default {
  name: 'IndexChart',
  components: {
    smLine,
    smPie,
    ChartCard
  },
  data() {
    return {
      loading: true,
      offsetDays: 86400000 * 365, //最多选择365天【一年】
      fraud_typeArr: getDictItemsFromCache('case_fraud_type'),
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      sourceArr: [
        { title: "全部", value: 0, },
        { title: "互联网挖掘", value: 1, },
        { title: "人工智能挖掘", value: 2, },
        { title: "涉诈网址上报", value: 3, }
      ],
      data1: {
        quickReportTotal: { moMValue: 0 },
        blockingDistributeTotal: { moMValue: 0 },
        unsealDistributeTotal: { moMValue: 0 },
        feedbackBlockingTotal: { moMValue: 0 },
        feedbackUnsealTotal: { moMValue: 0 },
      },
      data2: [],
      data3: [],
      data4: {
        data: [],
        legendRight: '260',
        itemGap: document.documentElement.clientHeight * 0.02
      },
      params2: {
        timeType: 2, //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      params3: {
        timeType: 2, //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      params4: {
        timeType: 2, //默认是当日
        startTime: undefined,
        endTime: undefined
      },
      active2Arr: [true, false, false],
      active3Arr: [true, false, false],
      active4Arr: [true, false, false],
      active5Arr: [true, false, false],
      rangeTime2: undefined,
      rangeTime3: undefined,
      rangeTime4: undefined,
      rangeTime5: undefined,
      selectPriceDate2: '',
      selectPriceDate3: '',
    }
  },
  created() { },
  mounted() {
    this.getData1()
    this.getData2()
    this.getData3()
    this.getData4()
  },
  methods: {
    moment,
    getData1() {
      statisticsTotal()
        .then(res => {
          if (res.success) {
            this.data1 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData2() {
      blockingTrend(this.params2)
        .then(res => {
          if (res.success) {
            this.data2 = []
            let data = res.result
            let list = []
            if (data != null && data.length > 0) {
              data.map(item => {
                list.push({
                  product: item.date,
                  数量: item.count
                })
              })
              this.data2 = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData3() {
      feedbackTrend(this.params3)
        .then(res => {
          if (res.success) {
            this.data3 = []
            let data = res.result
            let list = []
            if (data != null && data.length > 0) {
              data.map(item => {
                list.push({
                  product: item.date,
                  '数量': item.count
                })
              })
              this.data3 = list
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getData4() {
      blockingRatio(this.params4)
        .then(res => {
          if (res.success) {
            this.data4.data = []
            let arr = res.result
            // let arr = this.getPieData()
            if (arr != null && arr.length > 0) {
              this.$set(this.data4, 'data', arr)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    onSec2Click(num) {
      // 时间类型 0:自定义 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年
      // console.log(num)
      if (num == 1) { this.params2.timeType = 2 }
      if (num == 2) { this.params2.timeType = 4 }
      if (num == 3) { this.params2.timeType = 5 }
      this.active2Arr.forEach((item, index) => {
        this.$set(this.active2Arr, index, false)
      })
      this.$set(this.active2Arr, num - 1, true)
      this.rangeTime2 = undefined
      this.params2.startTime = undefined
      this.params2.endTime = undefined
      // console.log(this.active2Arr)
      this.getData2()
    },
    onSec3Click(num) {
      // 时间类型 0:自定义 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年
      if (num == 1) { this.params3.timeType = 2 }
      if (num == 2) { this.params3.timeType = 4 }
      if (num == 3) { this.params3.timeType = 5 }
      this.active3Arr.forEach((item, index) => {
        this.$set(this.active3Arr, index, false)
      })
      this.$set(this.active3Arr, num - 1, true)
      this.rangeTime3 = undefined
      this.params3.startTime = undefined
      this.params3.endTime = undefined
      this.getData3()
    },
    onSec4Click(num) {
      // 时间类型 0:自定义 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年
      if (num == 1) { this.params4.timeType = 2 }
      if (num == 2) { this.params4.timeType = 4 }
      if (num == 3) { this.params4.timeType = 5 }
      this.active4Arr.forEach((item, index) => {
        this.$set(this.active4Arr, index, false)
      })
      this.$set(this.active4Arr, num - 1, true)
      this.rangeTime4 = undefined
      this.params4.startTime = undefined
      this.params4.endTime = undefined
      this.getData4()
    },
    onTimeSec2Change(date, dateString) {
      this.params2.startTime = dateString[0]
      this.params2.endTime = dateString[1]
      // this.params2.dateTimeType = 'CUSTOMIZE'
      this.active2Arr = [false, false, false]
      if (this.params2.startTime && this.params2.endTime) {
        this.getData2()
      }
    },
    onTimeSec3Change(date, dateString) {
      this.params3.startTime = dateString[0]
      this.params3.endTime = dateString[1]
      // this.params3.dateTimeType = 'CUSTOMIZE'
      this.active3Arr = [false, false, false]
      if (this.params3.startTime && this.params3.endTime) {
        this.getData3()
      }
    },
    onTimeSec4Change(date, dateString) {
      this.params4.startTime = dateString[0]
      this.params4.endTime = dateString[1]
      // this.params4.dateTimeType = 'CUSTOMIZE'
      this.active4Arr = [false, false, false]
      if (this.params4.startTime && this.params4.endTime) {
        this.getData4()
      }
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date, string) {
      this[string] = date[0]
      if (date.length > 1) {
        //选择完时间 清空限制
        this[string] = ''
      }
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate2(current) {
      if (this.selectPriceDate2) {
        let selectV = moment(this.selectPriceDate2, 'YYYY-MM-DD').valueOf()
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') ||
          current > moment(new Date, 'YYYY-MM-DD')
        )
      } else {
        return current && current > moment().endOf('day')
      }
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate3(current) {
      if (this.selectPriceDate3) {
        let selectV = moment(this.selectPriceDate3, 'YYYY-MM-DD').valueOf()
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') ||
          current > moment(new Date, 'YYYY-MM-DD')
        )
      } else {
        return current && current > moment().endOf('day')
      }
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        // exportHandle.exportZip(filename)
        exportHandle.exportPDF(refDom, filename)
        // exportHandle.exportImages(refDom, filename)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-index-wide {
  margin-bottom: 12px;

  >.ant-row {
    margin-top: 12px;
  }
}

/deep/.chart-card-content {
  // display: none;
  height: 0;
}

.chart-card-footer {
  border: none;
}

/deep/.total {
  line-height: 54px;
  height: auto;

  span {
    display: block;
    text-align: center;
  }
}

/deep/.chart-card-footer {
  border: none;
  padding-top: 0;
}

/deep/ .ant-card-head-title {
  font-weight: bold;
}

/deep/ .chart-card-header .meta {
  text-align: center;
}

/deep/ .timeBox {
  .active {
    color: #5bc6f5;
  }

  .timeItem {
    cursor: pointer;
    margin-left: 20px;
  }
}

/deep/ .chart-card-footer .field {
  text-align: center;
}

.m1 {
  margin-left: 10px;
}

.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/deep/.ant-col-xl-4 {
  width: 20%;
}

/deep/.ant-form {
  position: absolute;
  width: 100%;
  z-index: 0;
}
</style>
